<template>
	<view class="lazy-imagelist">
		<view class="item" v-for="(item, index) in imagelist" :key="index">
			<image class="image" :src="item.src" mode=""></image>
			<!-- <image class="image" :class="{ lazy: !item.show }" :data-index="index" @load="imageLoad" :data-item="item" :src="item.show ? item.src : ''" mode=""></image>
			<view class="block image placeholder" :class="{ loaded: item.loaded }">
				<loadmore class="loadmore" status="loading" :content-text="{'contentdown':'加载中'}" color="#007aff" />
			</view> -->
		</view>
		
		
	</view>
</template>

<script>
import loadmore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: { loadmore },
	data: function() {
		return {
			placeholderSrc: '../../static/default.jpg',
			show: false,
			imagelist: [],
			windowHeight:0
		};
	},
	props: {
		list: {
			type: Array
		},
		scrollTop:{
			type:Number
		}
	},
	methods: {
		load() {
			let that = this;
			uni.createSelectorQuery()
				.in(this)
				.selectAll('.lazy')
				.boundingClientRect(images => {
					images.forEach((image, index) => {
						if (image.top <= that.windowHeight && !that.imagelist[image.dataset.index].show) {
							that.imagelist[image.dataset.index].show = true;
						}
					});
				})
				.exec();
		},
		imageLoad(e) {
			this.imagelist[e.target.dataset.index].loaded = true;
		}
	},
	watch:{
		scrollTop(newval){
			this.load()
		}
	},
	created: function() {
		this.windowHeight = uni.getSystemInfoSync().windowHeight;
		this.imagelist = this.list;
	}
};
</script>

<style lang="scss">
.lazy-imagelist {
	display: flex;
	margin-top: 50upx;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	.item {
		width: 40%;
		margin: 0 5%;
		height: 240px;
		position: relative;
		.block {
			display: inline-block;
			width: 90%;
			height: 90%;
			background: #ddd;
		}
		.image {
			width: 100%;
			position: absolute;
		}
	}
	.placeholder {
		opacity: 1;
		transition: opacity 0.4s linear;
	}

	.loaded {
		opacity: 0;
		
	}
}
</style>
